import type { Meta, StoryObj } from '@storybook/vue3-vite';

import { fn } from 'storybook/test';

import TiptapDoc from './index.vue';

const meta = {
  title: 'document/TiptapDoc',
  component: TiptapDoc,
  tags: ['autodocs'],
  render: (args) => ({
    components: { TiptapDoc },
    setup() {
      const value = ref(args.value || '');
      return { args, value };
    },
    template: `
          <div style="padding: 1rem;">
              <TiptapDoc
                v-bind="args"
                :value="value"
                @update:value="value = $event"
              />
              <p style="margin-top: 1rem;">当前值: {{ JSON.stringify(value) }}</p>
          </div>
      `
  }),
  argTypes: {
    value: {
      control: 'text',
      description: '编辑器内容'
    }
  },
  args: {
    value: undefined,
  }
}

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  name: '基础用法',
  args: {
    ...meta.args,
    value: '<p>这是一个 Tiptap 编辑器的示例内容。</p>',
  },
};

// export const showContent: Story = {
//   name: '显示内容',
//   args: {
//   },
// }
